<template>
	<view>
		<wrapBgImg />

		<navigationBar navigationTitle="商家入驻" />

		<view class="wrap safe-area flex column align-center">
			<view class="wrap-tips f-24">实名认证(请上传真实的信息，认证通过后将无法修改)</view>

			<view class="wrap-white-bg">
				<block v-for="(item, index) in list" :key="index">
					<rowOCR
						v-if="item.type === 'ocr' && item.direct === 'row'"
						:item="item"
						v-model="dataInfo[item.key]"
						ocrType="BusinessLicense"
						@ocrData="onOcrData"
					/>

					<wrapTextarea v-else-if="item.type === 'textarea'" :item="item" v-model="dataInfo[item.key]" />

					<rowUpload
						v-else-if="item.type === 'upload' && item.direct === 'row'"
						:item="item"
						v-model="dataInfo[item.key]"
					/>

					<wrapUpload
						v-else-if="item.type === 'upload' && item.direct === 'column'"
						:item="item"
						v-model="dataInfo[item.key]"
					/>

					<rowInput
						v-else-if="item.type === 'input' && item.direct === 'row' && item.isShow"
						:item="item"
						v-model="dataInfo[item.key]"
					/>

					<rowGroup
						v-else-if="item.type === 'group' && item.direct === 'row' && item.isShow"
						:item="item"
						v-model="dataInfo[item.key]"
					/>

					<rowChoose
						v-else-if="item.type === 'choose' && item.direct === 'row'"
						:item="item"
						v-model="dataInfo[item.key]"
					/>

					<wrapLocation
						v-else-if="item.type === 'location'"
						:item="item"
						v-model="dataInfo[item.key]"
						:lat.sync="dataInfo.lat"
						:lng.sync="dataInfo.lng"
					/>

					<listChooseAddVue
						v-else-if="item.type === 'addListChoose'"
						:item="item"
						:isRadio="item.isRadio"
						v-model="dataInfo[item.key]"
						@addSign="addSign"
					/>
				</block>
			</view>

			<view class="sure-btn theme-gradient-btn f-34" @click="onSubmit">提交</view>
		</view>

		<storeServiceSign :isShow.sync="isShowAddServiceSign" @onSureAdd="getServiceSignList()" />
	</view>
</template>

<script>
	import { ApplyShop, ServiceSignList, GetShopCateTwo } from "@/API/store.js";
	import wrapBgImg from "@/components/navigationBar/bgImg.vue";
	import navigationBar from "@/components/navigationBar/navigationBar.vue";
	import rowOCR from "@/components/form/rowOCR.vue";
	import wrapTextarea from "@/components/form/textarea.vue";
	import rowUpload from "@/components/form/rowUpload.vue";
	import rowInput from "@/components/form/rowInput.vue";
	import rowGroup from "@/components/form/rowGroup.vue";
	import wrapUpload from "@/components/form/upload.vue";
	import rowChoose from "@/components/form/rowChoose.vue";
	import wrapLocation from "@/components/form/location.vue";
	import listChooseAddVue from "@/components/form/listChooseAdd.vue";
	import storeServiceSign from "@/components/mine/storeServiceSign.vue";

	export default {
		components: {
			wrapBgImg,
			navigationBar,
			rowOCR,
			wrapTextarea,
			rowUpload,
			rowInput,
			rowGroup,
			wrapUpload,
			rowChoose,
			wrapLocation,
			listChooseAddVue,
			storeServiceSign,
		},
		data() {
			return {
				dataInfo: {
					number: "", //营业执照号
					scope_business: "", //经营范围
					logo: "", //店铺Logo
					shop_bg: "", //店铺背景
					shopname: "", //店铺/公司名称
					mobile: "", //商家手机号
					service_ids: "", //服务标签
					shop_type: "0", //店铺类型
					shopcate_id: "", //店铺分类
					shop_image: "", //店内照片
					start_time: "", //开始时间
					end_time: "", //结束时间
					city: "", //所在区域
					lat: "", //纬度
					lng: "", //经度
					address: "", //详细地址
					bio: "", //店铺简介
					shop_contract_type: "0", //是否有合同
					image: "", //执照照片
					qualification_image: "", //资质照片
					id_card_frontage: "", //身份证正面
					id_card_opposite: "", //身份证反面
					is_discount: "0", //是否是95折商家
					cash_discount: "", //店铺提现折扣率
				},

				cate_one_list: [],
				cate_two_list: [],
				serviceSignList: [], //服务标签列表
				isShowAddServiceSign: false, //是否显示添加服务标签弹窗
			};
		},
		onLoad() {
			this.getServiceSignList();
			this.getCateData();
		},
		computed: {
			list() {
				return [
					{
						title: "执照号",
						require: true,
						type: "ocr",
						key: "number",
						mode: "text",
						maxlength: 18,
						direct: "row",
						place: "请识别您的营业执照号",
						tips: "请输入/识别您的营业执照号",
						isShow: true,
					},
					{
						title: "经营范围",
						require: true,
						type: "textarea",
						key: "scope_business",
						place: "请输入您的法定经营范围",
						mode: "text",
						maxlength: -1,
						tips: "请输入您的法定经营范围",
						height: "220",
						isShow: true,
					},
					{
						title: "店铺Logo",
						require: true,
						type: "upload",
						key: "logo",
						direct: "row",
						tips: "请上传您的店铺logo",
						isShow: true,
					},
					{
						title: "店铺背景",
						require: true,
						type: "upload",
						key: "shop_bg",
						direct: "row",
						tips: "请上传您的店铺背景",
						isShow: true,
					},
					{
						title: "店铺/公司名称",
						require: true,
						type: "input",
						key: "shopname",
						place: "请输入店铺名称",
						mode: "text",
						maxlength: 100,
						tips: "请输入店铺名称",
						direct: "row",
						isShow: true,
					},
					{
						title: "商家电话",
						require: true,
						type: "input",
						key: "mobile",
						place: "请输入商家电话号码",
						mode: "tel",
						maxlength: 11,
						tips: "请输入商家电话号码",
						direct: "row",
						isShow: true,
					},
					{
						title: "服务标签",
						require: true,
						key: "service_ids",
						type: "addListChoose",
						list: this.serviceSignList,
						tips: "请选择服务标签",
						isRadio: false,
						isShow: true,
					},
					{
						title: "店铺类型",
						require: true,
						type: "group",
						direct: "row",
						key: "shop_type",
						tips: "请选择发布类型",
						list: [
							{ id: "0", title: "本地商圈" },
							{ id: "1", title: "电商店铺" },
						],
						isShow: true,
					},
					{
						title: "店铺分类",
						require: true,
						type: "choose",
						direct: "row",
						isArrow: true,
						key: "shopcate_id",
						mode: "selector",
						rangeKey: "name",
						place: "请选择店铺分类",
						tips: "请选择店铺分类",
						list: this.dataInfo.shop_type === "0" ? this.cate_one_list : this.cate_two_list,
						isShow: true,
					},
					{
						title: "95折商家",
						require: true,
						type: "group",
						direct: "row",
						key: "is_discount",
						tips: "请选择95折商家",
						list: [
							{ id: "0", title: "否" },
							{ id: "1", title: "是" },
						],
						isShow: this.dataInfo.shop_type === "1",
					},
					{
						title: "店内照片",
						require: true,
						type: "upload",
						key: "shop_image",
						direct: "column",
						tips: "请上传店内照片",
						isShow: true,
					},
					{
						title: "开始时间",
						require: true,
						type: "choose",
						key: "start_time",
						mode: "time",
						direct: "row",
						place: "请选择营业开始时间",
						rangeKey: "",
						list: [],
						tips: "请选择营业开始时间",
						isArrow: true,
						isShow: true,
					},
					{
						title: "结束时间",
						require: true,
						type: "choose",
						key: "end_time",
						mode: "time",
						direct: "row",
						place: "请选择营业结束时间",
						list: [],
						tips: "请选择营业结束时间",
						isArrow: true,
						isShow: true,
					},
					{
						title: "所在区域",
						require: true,
						type: "location",
						key: "city",
						place: "选择位置-定位",
						tips: "请选择所在区域",
						direct: "row",
						isShow: true,
					},
					{
						title: "详细地址",
						require: true,
						type: "input",
						key: "address",
						place: "请输入店铺地址",
						mode: "text",
						maxlength: 100,
						tips: "请输入店铺地址",
						direct: "row",
						isShow: true,
					},
					{
						title: "店铺简介",
						require: true,
						type: "textarea",
						key: "bio",
						place: "请输入店铺简介",
						mode: "text",
						maxlength: -1,
						tips: "请输入店铺简介",
						height: "100",
						isShow: true,
					},
					{
						title: "店铺合同",
						require: true,
						type: "group",
						direct: "row",
						key: "shop_contract_type",
						tips: "请选择店铺合同",
						list: [
							{ id: "0", title: "无" },
							{ id: "1", title: "有" },
						],
						isShow: true,
					},
					{
						title: "店铺提现折扣(%)",
						require: true,
						type: "input",
						direct: "row",
						key: "cash_discount",
						mode: "number",
						maxlength: 3,
						isShow: this.dataInfo.shop_contract_type == 1,
						place: "请输入店铺提现折扣",
						tips: "请输入店铺提现折扣",
					},
					{
						title: "执照照片",
						require: true,
						type: "upload",
						key: "image",
						direct: "row",
						tips: "请上传执照照片",
						isShow: true,
					},
					{
						title: "资质许可照片",
						require: true,
						type: "upload",
						key: "qualification_image",
						direct: "row",
						tips: "请上传资质许可照片",
						isShow: true,
					},
					{
						title: "经营者身份证正面",
						require: true,
						type: "upload",
						key: "id_card_frontage",
						direct: "row",
						tips: "请上传经营者身份证正面",
						isShow: true,
					},
					{
						title: "经营者身份证反面",
						require: true,
						type: "upload",
						key: "id_card_opposite",
						direct: "row",
						tips: "请上传经营者身份证反面",
						isShow: true,
					},
				];
			},
		},
		watch: {
			"dataInfo.shop_type": {
				handler(oldVal, newVal) {
					if (newVal === "1") {
						this.dataInfo.is_discount = "0";
					}
					this.dataInfo.shopcate_id = "";
				},
				immediate: true,
			},
		},
		methods: {
			/**
			 * 添加标签
			 */
			addSign() {
				this.isShowAddServiceSign = true;
			},
			/**
			 * ocr识别
			 */
			onOcrData(res) {
				this.dataInfo.number = res.RegisterNumber;
				this.dataInfo.scope_business = res.Business;
				// this.dataInfo.shopname = res.Name;
				this.dataInfo.address = res.Address;
			},
			/**
			 * 提交
			 */
			onSubmit() {
				if (this.$filters.judgeFormData(this.list, this.dataInfo)) {
					this.$throttle(() => {
						ApplyShop(this.dataInfo).then((res) => {
							this.$st.success("提交成功", () => {
								uni.navigateBack();
							});
						});
					});
				}
			},
			/**
			 * 获取服务标签
			 */
			getServiceSignList() {
				ServiceSignList().then((res) => {
					this.serviceSignList = res.data;
				});
			},
			/**
			 * 获取分类接口
			 */
			getCateData() {
				GetShopCateTwo().then((res) => {
					this.cate_one_list = res.data.list;
					this.cate_two_list = res.data.list2;
				});
			},
		},
	};
</script>

<style scoped>
	@import "@/css/publish.css";

	.wrap-tips {
		color: #888888;
		width: calc(100% - 70rpx);
	}
</style>
